<template>
    <div class="search-res">
        <ul v-show ='hasKeyWord'>
            <li 
                v-for="item in resultList"
                :key="item.id"
                @click="gotoPage(item.id)">
                <div class="photo">
                    <img    
                        :src="item.img" 
                        :style="{background:`url('${loadingUrl}') 50% 50% no-repeat`,'background-size': '100% 100%'}"
                        alt=""
                    >
                </div>
                <div class="text">
                    <div class="shortTxt title">{{item.nm}}</div>
                    <div class="shortTxt cat">类型：<span>{{item.cat}}</span> </div>
                    <div class="shortTxt rt" v-if='item.rt!=undefined&&item.rt.length>0'>上映时间：<span>{{item.rt}}</span>  </div>
                    <div class="shortTxt rt" v-if='item.rt==undefined||item.rt.length==0'>暂无上映时间</div>
                </div>
            </li>
            <li v-show="isNoResult">
                <i class="bi bi-cloud-check"></i> 暂无更多结果
            </li>
            <li 
                v-show="!isNoResult && !isLoading"
                @click="gotoSearch()">
                <i class="bi bi-cloud-plus"></i> 点击加载更多
            </li>
            <li v-show="isLoading">
                <com-loading></com-loading>
            </li>
        </ul>
    </div>
</template>

<script>
import comLoading from '@/components/comLoading.vue'
export default {
    name: 'searchResult',
    props: {
        keyword: String, 
        hasKeyWord: Boolean //判断搜索框有无字符
    },
    data() {
        return {
            resultList: [], // 放置结果的数组
            isNoResult: false, // 后续无结果
            isLoading: false, // 正在搜索结果
            loadingUrl: require('@/assets/img/loading2.gif'),
        }
    },
    components: {
        comLoading,
    },
    watch: {
        keyword(newv, oldv) {
            //关键词改变时，清除上一次的搜索结果
            this.resultList = [];
            this.pageNum = 0;
            this.isNoResult = false;
            //判断是否有值,有值开始请求数据
            if(newv != undefined && newv.length > 0){
                this.gotoSearch();
            }
        }
    },
    methods: {
        // 首次搜索新字符串加载，显示加载动画
        gotoSearch() {
            this.isLoading = true;
            this.axios
            .get('https://apis.netstart.cn/maoyan/search/movies?keyword='+this.keyword+'&ci=1&offset='+this.resultList.length)
            .then((success)=> {
                // console.log(success);
                // 第二次加载时，数据放的位置不一样
                if(success.movies != undefined){
                    success = success.movies;
                }
                //统一数据格式
                success.forEach(item => {
                    item = this.changeData21(item);
                });
                this.isLoading = false;
                if(success.length < 20){
                    this.isNoResult = true;
                    this.resultList = this.resultList.concat(success);
                }
                else {
                    this.resultList = this.resultList.concat(success);
                }
            })
            .catch((err)=>{
                console.log(err);
            })
        },
        // 统一数据格式
        changeData21(data) {
            // 统一图片的属性
            data.img = data.img == undefined ? data.poster: data.img;
            data.img.replace('w.h','170.230');
            // 统一名字标签
            data.nm = data.nm == undefined ? data.name : data.nm;
            // 统一标签名
            data.cat = data.cat == undefined ? data.catogary : data.cat;
            // 统一上映时间
            data.rt = data.rt == undefined ? data.release: data.rt;
            return data;
        },
        // 进入影片的详情页
        gotoPage(id) {
            this.$router.push('/movie_detail/'+id+'/required');
        }
    }
}
</script>

<style lang="scss" scoped>
@import '@/assets/common/variable.scss';
.search-res {
    li {
        padding: 20px 0px;
        background: white;
        font-size: 18px;
        padding: 10px 15px;
        margin-bottom: 3px;
        display: flex;
        .photo {
            width: 70px;
            height: 94px;
            margin-right: 10px;
        }
        img {
            width: 70px;
            height: 94px;
        }
        .text {
            width: 240px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
        }
        .title {
            font-weight: bold;
        }
        .rt,
        .cat {
            font-size: 12px;
        }
        span {
            font-size: 14px;
            color: $fontColor3;
        }
        i {
            margin-right: 5px;
        }
    }
}
</style>